<template>
  <div>
    <van-nav-bar fixed title="门店详情" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <div class="pos-a bg-primary z-inner bg-box"></div>
      <div class="mg-25 pos-r bg-white">
        <img-box class="shop-bg-box pos-r" :imgUrl="imgUrl"></img-box>
        <div class="pos-a color-white top-80 full-width tac">
          <p class="fs-32 fw-b">这里是门店名称</p>
          <p class="fs-28 mt-15">10:00-22:00</p>
        </div>
        <p class="tac fs-28 mt-30">泉州市丰泽区宝成大厦4号楼8楼</p>
        <p class="mt-25 fs-28 flex-center">
          <svg-icon icon-class="address" class="mr-15 color-primary" />
          <span>3.69km</span>
        </p>
        <div class="mt-40 mlr-20 flex-s-c ht">
          <div class="flex-1 flex-center flex-d-c hr mtb-10">
            <svg-icon icon-class="tel2" class="fs-40 mtb-25 color-primary" />
            <p class="fs-28 mb-35">400-800-360</p>
          </div>
          <div class="flex-1 flex-center flex-d-c mtb-10">
            <svg-icon icon-class="store" class="fs-40 mtb-25 color-primary" />
            <p class="fs-28 mb-35">进入门店</p>
          </div>
        </div>
      </div>
      <p class="mg-25 fs-28">相似门店</p>
      <bussiness-item
        v-for="(item, index) in bussinessList"
        type="nearbyStore"
        :key="index"
        :bussinessItem="item"
      />
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import bussinessItem from 'components/bussinessItem'
export default {
  components: { imgBox, bussinessItem },
  data() {
    return {
      imgUrl:
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600949326496&di=53ee9a05d3ed0b88b189c29a67d91e0e&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
      bussinessList: [
        {
          id: 1,
          imgUrl: '',
          StoreName: '米斯韦尔ce测晒十大十大杀手 是大红色的疯狂打',
          BusinessHours: '10:00-24:00',
          tag: ['全国连锁', '打骨折'],
          Distance: 300,
          isLike: true
        },
        {
          id: 2,
          imgUrl: '',
          StoreName: '米斯韦尔',
          BusinessHours: '10:00-24:00',
          tag: ['全国连锁', '打骨折'],
          Distance: 300,
          isLike: true
        },
        {
          id: 3,
          imgUrl: '',
          StoreName: '米斯韦尔',
          BusinessHours: '10:00-24:00',
          tag: ['全国连锁', '打骨折'],
          Distance: 300,
          isLike: false
        }
      ],

      //
      scrollspy: true,
      active0: 0,
      active1: 1,
      active2: 2,
      active: 0
    }
  },

  methods: {
    ddd(data) {
      console.log(data)
      console.log(this.$refs)
      // this.$refs.tabs.scrollTo(data)
    },
    scroll(data) {
      if (data.isFixed) {
        this.$refs.tabs.$refs.nav.classList.add('van-tabs__nav_Fixed')
      } else {
        this.$refs.tabs.$refs.nav.classList.remove('van-tabs__nav_Fixed')
      }
    }
  },
  computed: {},
  created() {}
}
</script>
<style lang="scss" scoped>
.bg-box {
  width: 100%;
  height: 508px;
}
.shop-bg-box {
  width: 100%;
  height: 250px;
}
.van-button--primary {
  @include bg-primary();
  border: none;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  padding: 0 18px;
  float: right;
}
/deep/.van-tabs__nav {
  background: $colorF5;
  .van-tab {
    font-size: 16px;
    font-weight: bold;
  }
}
/deep/.van-tabs__nav_Fixed {
  background: $colorF;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
</style>
